<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
</head>
<body>
    <div class="main">
        <div class="header">
            <h1>中华优秀传统文化</h1>
            <p>传承中华优秀文化</p>
        </div>
        <div class="nav">
            <ul>
                <li class="d1"><a href="#">首页</a>
                    <ul class="submenu">
                        <li><a href="#wenhua">文化</a></li>
                        <li><a href="#yishu">工艺</a></li>
                        <li><a href="#jieri">节日</a></li>
                    </ul>
                </li>
                <li class="d1"><a href="history.html">历史传承</a>
                    <ul class="submenu">
                        <li><a href="history.html#culture">朝代文化</a></li>
                        <li><a href="history.html#celebrities">文化名人</a></li>
                    </ul>
                </li>
                <li class="d1"><a href="thought.html">哲学思想</a>
                    <ul class="submenu">
                        <li><a href="thought.html#classics">经典著作</a></li>
                        <li><a href="thought.html#schools">诸子百家</a></li>
                        <li><a href="thought.html#wisdom">哲学智慧</a></li>
                    </ul>
                </li>
                <li class="d1"><a href="folk.html">民俗生活</a>
                    <ul class="submenu">
                        <li><a href="folk.html#food">传统美食</a></li>
                        <li><a href="folk.html#festivals">节庆习俗</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/001.jpg">
                    <p class="swiper-caption">书法艺术：中国书法是以汉字为载体的独特艺术形式</p>
                </div>
                <div class="swiper-slide">
                    <img src="img/002.jpg">
                    <p class="swiper-caption">京剧艺术：融合唱、念、做、打等表演形式的中国国粹</p>
                </div>
                <div class="swiper-slide">
                    <img src="img/003.jpg">
                    <p class="swiper-caption">茶道文化：体现"清静和雅"精神追求的传统艺术</p>
                </div>
                <div class="swiper-slide">
                    <img src="img/004.jpg">
                    <p class="swiper-caption">瓷器艺术：凝聚古代工匠智慧的"瓷之国"技艺</p>
                </div>
                <div class="swiper-slide">
                    <img src="img/005.jpg">
                    <p class="swiper-caption">刺绣：苏绣、湘绣等六大名绣展现的针线艺术</p>
                </div>
                <div class="swiper-slide">
                    <img src="img/006.jpg">
                    <p class="swiper-caption">围棋：蕴含阴阳哲学的古老智力竞技游戏</p>
                </div>
                <div class="swiper-slide">
                    <img src="img/007.jpg">
                    <p class="swiper-caption">丝绸技艺：承载千年中外文化交流的纺织艺术</p>
                </div>
                <div class="swiper-slide">
                    <img src="img/008.jpg">
                    <p class="swiper-caption">春节：贴春联、守岁等习俗构成的文化记忆</p>
                </div>
                <div class="swiper-slide">
                    <img src="img/009.jpg">
                    <p class="swiper-caption">剪纸艺术：用剪刀刻刀创造节庆装饰的民间工艺</p>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
        <script src="js/swiper-bundle.min.js"></script>
        <script>        
            var mySwiper = new Swiper ('.swiper', {
              direction: 'horizontal', // 垂直切换选项
              loop: true, // 循环模式选项
              autoplay:true,//主动播放
              autoplay: {
                delay: 1000,
                stopOnLastSlide: false,
                disableOnInteraction: false, 
                pauseOnInteraction: true // 交互时暂停自动播放
                },
            
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
                clickable:true,
              },

              // 如果需要前进后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },

            //   // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
                },
            })      


            let autoplayTimeout;

            // 监听分页器点击事件
            mySwiper.pagination.el.addEventListener('click', function(e) {
              if (e.target.classList.contains('swiper-pagination-bullet')) {
                resetAutoplayTimer();
              }
            });

            // 监听导航按钮点击事件
            mySwiper.navigation.nextEl.addEventListener('click', resetAutoplayTimer);
            mySwiper.navigation.prevEl.addEventListener('click', resetAutoplayTimer);

            // 监听手动滑动事件
            mySwiper.on('slideChange', resetAutoplayTimer);

            // 重置自动播放计时器
            function resetAutoplayTimer() {
              // 暂停当前自动播放
              mySwiper.autoplay.stop();
            
              // 清除之前的计时器
              if (autoplayTimeout) clearTimeout(autoplayTimeout);
            
              // 设置新的计时器，2秒后恢复自动播放
              autoplayTimeout = setTimeout(() => {
                mySwiper.autoplay.start();
              }, 2000);
            }
        </script>
        <div class="container">
            <div class="section-title" id="wenhua">
                <h2>文化艺术</h2>
            </div>
            <div class="card">
                <div class="card-img">
                    <img src="img/001.jpg">
                </div>
                <div class="card-content">
                    <h3>书法艺术</h3>
                    <p>中国书法是以汉字为载体的独特艺术形式，历经甲骨文、金文、篆书、隶书、楷书、行书、草书等演变</p>
                </div>
            </div>
            <div class="card">
                <div class="card-img">
                    <img src="img/002.jpg">
                </div>
                <div class="card-content">
                    <h3>京剧艺术</h3>
                    <p>京剧是中国国粹，融合唱、念、做、打等表演形式，具有程式化、虚拟化的艺术特点</p>
                </div>
            </div>
            <div class="card">
                <div class="card-img">
                    <img src="img/003.jpg">
                </div>
                <div class="card-content">
                    <h3>茶道文化</h3>
                    <p>中国茶文化源远流长，包含茶叶种植、制作、品饮等完整体系，体现"清静和雅"的精神追求</p>
                </div>
            </div>
            <div class="section-title" id="yishu">
                <h2>传统工艺</h2>
            </div>
            <div class="card"> 
                <div class="card-img">
                    <img src="img/004.jpg">
                </div>
                <div class="card-content">
                    <h3>瓷器艺术</h3>
                    <p>中国是瓷器的故乡，瓷器制作技艺凝聚了古代工匠的智慧，被誉为"瓷之国"。从练泥、制坯到上釉等工序都体现了高超工艺，对世界文明产生了深远影响</p>
                </div>
            </div>
            <div class="card">
                <div class="card-img">
                    <img src="img/005.jpg">
                </div>
                <div class="card-content">
                    <h3>刺绣</h3>
                    <p>包括苏绣、湘绣、粤绣、蜀绣等六大名绣，至少有二三千年历史。刺绣通过针线展现艺术美感，不同绣种各具特色，反映了地域文化风貌</p>
                </div>
            </div>
            <div class="card">
                <div class="card-img">
                    <img src="img/006.jpg">
                </div>
                <div class="card-content">
                    <h3>围棋</h3>
                    <p>中国古老的智力竞技游戏，已有四千多年历史，属"琴棋书画"四艺之一。蕴含阴阳、战略等哲学思想，古代文人常以棋会友</p>
                </div>
            </div>
            <div class="section-title" id="jieri">
                <h2>节庆民俗</h2>
            </div>
            <div class="card">
                <div class="card-img">
                    <img src="img/007.jpg">
                </div>
                <div class="card-content">
                    <h3>‌丝绸技艺</h3>
                    <p>中国是世界上最早发明养蚕缫丝技术的国家，丝绸制作可追溯至四五千年前。作为"丝绸之路"的核心商品，丝绸不仅承载着古代纺织工艺巅峰，更成为中外文化交流的重要符号</p>
                </div>
            </div>
            <div class="card">
                <div class="card-img">
                    <img src="img/008.jpg">
                </div>
                <div class="card-content">
                    <h3>春节</h3>
                    <p>春节贴春联、守岁的习俗延续千年，共同构成中华民族的文化记忆</p>
                </div>
            </div>
            <div class="card">
                <div class="card-img">
                    <img src="img/009.jpg">
                </div>
                <div class="card-content">
                    <h3>剪纸艺术</h3>
                    <p>这种距今1500多年的民间工艺，通过剪刀或刻刀在纸上创作花纹，常用于节庆装饰。2006年被列入国家级非物质文化遗产，单色剪纸的朴素与套色剪纸的绚丽各具特色</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>信安2407何沂蔚24120711版权所有</p>
        </div>
    </div>
</body>
</html>